<template>
  <div class="home">
    <home-header/>
    <home-logo/>
    <home-swiper :list="iconList"/>
    <home-recommend :list="recommedList"/>
    <home-footer/>
  </div>
</template>

<script>
// "./"代表本目录，"../"代表上一次目录
import HomeHeader from "./components/HomeHeader.vue";
import HomeLogo from "./components/HomeLogo.vue";
import HomeSwiper from "./components/HomeSwiper.vue";
import HomeRecommend from "./components/HomeRecommend.vue";
import HomeFooter from "./components/HomeFooter.vue";
import axios from "axios";


export default {
  name: "home",
  components: {
    HomeHeader,
    HomeLogo,
    HomeSwiper,
    HomeRecommend,
    HomeFooter

  },
  data: function() {
    return {
      iconList: [],
      recommedList: []
    };
  },
  mounted() {
    this.getHomeApiInfo();
  },
  methods: {
    getHomeApiInfo() {
      axios
        .get("/mock/home.json") //利用axios请求json数据
        .then(this.getHomeResponseInfo, function(success) {
          console.log("已收集json到数据");
          console.log(success);
        })
        .catch(function(err) {
          console.log("没有得到数据");
          console.log(err);
        });
    },
    getHomeResponseInfo(response) {
      console.log(response.data);
      let res = response.data; //就是home.json里面的内容
      if (res.success && res.dataList) {
        const data = res.dataList; //取json中的dataList属性
        console.log(data.iconLists.length);
        console.log(data.RecommedLists.length);
        this.iconList = data.iconLists;
        this.recommedList = data.RecommedLists;
      }
    }
  }
};
</script>
